<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      /**
       * 绘制文字
       * textAlign: 设置或返回文本内容的当前对齐方式
       * textBaseline: 设置或返回文本内容的当前垂直对齐方式
       * font: 设置或返回画布上文本内容的当前字体属性,必须在绘制前书写
       * fillStyle: 设置或返回文本内容的当前颜色、渐变或模式
       * 
       * fillText(text, x, y, maxWidth): 在画布上绘制“被填充的”文本
       * strokeText(text, x, y, maxWidth): 在画布上绘制文本(无填充)
      */
      const myCanvas = document.getElementById("myCanvas");
      const ctx = myCanvas.getContext("2d");

      ctx.moveTo(0, 0);
      ctx.font = "36px Arial";
      ctx.strokeStyle = "orange";
      ctx.textAlign = "left";
      ctx.strokeText("Hello World", 10, 50);
    </script>
  </body>
</html>